<template>
  <div class="NoTice">
    <div>
      <el-input v-model="limit.titleLike" placeholder="标题" style="width:200px"></el-input>
      <el-input v-model="limit.type" placeholder="类型" style="width:200px"></el-input>

      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker v-model="limit.dateAddBegin" type="date" placeholder="发布时间起">
      </el-date-picker>

      <el-date-picker v-model="limit.dateAddEnd" type="date" placeholder="发布时间止">
      </el-date-picker>

      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="success" @click="increase">添加</el-button>

    </div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="480px"
      @selection-change="handleSelectionChange">



      <el-table-column prop="title" label="标题" width="400">
      </el-table-column>


      <el-table-column prop="statusStr" label="状态">
        <template slot-scope="{row}">
          <el-tag type="success" v-if='row.statusStr = "显示"'>显示</el-tag>
          <el-tag type="danger" v-else>隐藏</el-tag>
        </template>

      </el-table-column>

      <el-table-column prop="linkUrl" label="添加时间/更新时间">
      </el-table-column>
      <el-table-column prop="address" label="操作" width="300" style="text-align:center">
        <template slot-scope="{row}">

          <el-button type="text" style="color:#409eff" @click="edit(row)"> {{ row.date }}编辑</el-button>
          <el-button type="text" style="color:red" @click="del(row)">删除</el-button>
        </template>


      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 30, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

  </div>
</template>
  
<script>
import { cmsgonggao, cmssancu } from "@/api/index"

export default {
  name: 'NoTice',
  data() {
    return {

      tableData: [],

      limit: {
        page: 1,
        pageSize: 10,
        input1: '',
        dateAddBegin: '',
        dateAddEnd: '',
        id: "",

        titleLike: "",
        type: "",
        isShow: ""

      },
      options: [{
        value: '选项1',
        label: '展示'
      }, {
        value: '选项2',
        label: '隐藏'
      }],
      value: '选项1',
      currentPage: 1,
      total: 10,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑
    edit(row) {
      console.log(row)
    },

    // 删除
    del(row) {
      this.cmssancus({
        id: row.id
      })
    },
    // 删除接口
    async cmssancus(params) {
      let data = await cmssancu(params)
      if (data.msg === "success") {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      } else {
        this.$message.error(data.msg);
      }
    },
    // 加载请求
    async getAdminlist(params) {
      let { data: res } = await cmsgonggao(params)
      this.tableData = res.result
      this.total = res.totalRow


    },
    handleSizeChange(val) {
      // 选择多少条信息时 获取条数参数 重新请求接口,且把当前所在的页数默认为1
      console.log(`每页 ${val} 条`);
      this.limit.pageSize = val
      this.currentPage = 1
      this.limit.page = 1
      this.getAdminlist(this.limit)
    },
    handleCurrentChange(val) {
      // 获取到当前页 赋值给page 传给后端请求数据
      console.log(`当前页: ${val}`);
      this.currentPage = val

      this.limit.page = val
      this.getAdminlist(this.limit)

    },
    // 搜索
    search() {
      this.getAdminlist(this.limit)
    },
    // 添加
    increase() {
      console.log(this.limit)
    }
  },

  // 加载请求调用
  mounted() {
    this.getAdminlist(this.limit)
  },
}
</script>
<style lang="scss" scoped>
.SinglePage {

  &::v-deep td,
  th .cell {
    text-align: center;
  }

  &::v-deep .el-table th.el-table__cell>.cell {
    text-align: center;
  }
}
</style>